<template>
  <div>
    <div class="main" v-if="$store.state.markeMsg.isshow3">
      <el-link @click.prevent="isshow" type="primary">回到上级</el-link>
      <div class="body">
        <div class="title">
          <div id="id">考试ID：{{id}}</div>
          <div id="name">考试名称：{{name}}</div>
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            height="500"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="sort"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排名"
              sortable
              width="100">
            </el-table-column>
            <el-table-column
              prop="user"
              label="考试用户"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="考试时间"
              width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              prop="spend"
              label="考试用时"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="score"
              label="客观题得分"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="scoreAll"
              label="总分"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="info"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">审查</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handlemarke(scope.$index, scope.row)">批阅</el-button>
            </template>
          </el-table-column>
          </el-table>
      </div>
    </div>
    <teachLook v-show="!$store.state.markeMsg.isshow3" :student="student"></teachLook>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import teachLook from './teachLook.vue';
export default {
  props:['name','id'],//组件间通信
  components:{
    teachLook
  },
  data() {
      return {
        student:{
          stuid:'',
          stuname:'',
          scoreAll:'',
        },
        multipleSelection: []
      }
    },
    computed:{
      ...mapState({
        tableData:state=>state.stuMsg.tableData
      })
    },
    watch:{
      tableData:{
        handler(){
          console.log(1)
        },
        immediate: true
      }
    },
  methods: {
    isshow(){
      console.log(1)
      this.$store.state.markeMsg.isshow1=true;
      this.$store.state.markeMsg.isshow2=false;
    },
    handlemarke(a,b){//批阅试卷
        this.$store.state.markeMsg.isshow3=false;
        this.$store.state.markeMsg.isshow4=true;
        console.log(b)
        this.student.stuid=b.stuid;
        this.student.stuname=b.name;
        this.student.scoreAll=b.scoreAll;
    },
    handleEdit(a,b){//审查试卷
      console.log(a);
      console.log(b);
      this.$store.state.markeMsg.isshow2=true;
    },
  },
}
</script>

<style scoped lang="less">
.el-link{
  margin-bottom:10px;
}
.title {
  border: 5px solid gray;
  box-shadow: 1px 1px 5px  gold;
  border-radius: 50px;
  display: flex;
  justify-content: space-around;
  #id,#name {
    padding: 10px;
  }
}
</style>